{% extends "./inc_base.html" %}
{% block style %}
<link href="/static/assets/css/layout-shop.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/static/assets/plugins/share/css/share.min.css">
{% endblock %}
{% block content %}
{%if category.pid !=0%}
{%column data="column",pid=category.pid%}
{%else%}
{%column data="column",cid=category.id%}
{%endif%}

<section class="page-header page-header-xs">
    <div class="container">
        {%if column|length>0%}
        <h1>{{category.title}}</h1>
        {%endif%}
        <!-- breadcrumbs -->
        <ol class="breadcrumb {%if column|length==0%} breadcrumb-inverse {%endif%}">
            <li><a href="/">首页</a></li>
            {%for val in breadcrumb %}
            <li><a href="{{val.url}}">{{val.title}}</a></li>
            {%if column|length==0%} <li>{{info.title}} </li>{%endif%}
            {% endfor %}
        </ol> <!-- /breadcrumbs -->

        <!-- page tabs -->
        {%if column|length >0%}
        <ul class="page-header-tabs list-inline">
            <li {%if breadcrumb[0].id == category.id %}class="active"{%endif%}><a href="{{breadcrumb[0].url}}">全部</a></li>
            {%for val in column%}
            <li  {%if val.id == category.id %}class="active"{%endif%}><a href="{{val.url}}">{{val.name}}</a></li>
            {%endfor%}
        </ul>
        {%endif%}<!-- /page tabs -->
    </div>
</section>
<!-- /PAGE HEADER -->
<!-- -->
<section>
    <div class="container">

        <div class="row">

            <!-- RIGHT -->
            <div class="col-lg-10 col-md-10 col-sm-10">
                <div class="panel panel-default tabs">
                    <div class="panel-heading panel-heading-transparent">
                        <h2 class="panel-title">{{info.title}}</h2>
                    </div>

                    <div class="panel-body">
                        <div class="row">

                            <!-- IMAGE -->
                            <div class="col-lg-6 col-sm-6">
                                {% set pic = info.pics|strToArray%}
                                <div class="thumbnail relative margin-bottom-3 ">


                                    <!--
                                    IMAGE ZOOM

                                    data-mode="mouseover|grab|click|toggle"
                                    -->
                                    <figure id="zoom-primary" class="zoom" data-mode="mouseover">
                                        <!--
                                        zoom buttton

                                        positions available:
                                        .bottom-right
                                        .bottom-left
                                        .top-right
                                        .top-left
                                        -->
                                        <a class="lightbox bottom-right" href="{{pic[0]|get_pic('m=0')}}" data-plugin-options='{"type":"image"}'><i class="glyphicon glyphicon-search"></i></a>

                                        <!--
                                        image

                                        Extra: add .image-bw class to force black and white!
                                        -->
                                        <img class="img-responsive" src="{{pic[0]|get_pic('m=1,w=800,h=800')}}"  alt="This is the product title" />
                                    </figure>

                                </div>

                                <!-- Thumbnails (required height:100px) -->
                                {% if pic|length >1%}
                                <div data-for="zoom-primary" class="zoom-more owl-carousel owl-padding-3 featured nomargin-bottom"
                                     data-plugin-options='{"singleItem": false, "autoPlay": false, "navigation": true, "pagination": false,"itemsMobile":[479,5]}'>
                                    {%set i = 0%}
                                    {% for val in pic%}
                                    <a class="thumbnail nomargin-bottom {%if i == 0%}active{%endif%}" href="{{val|get_pic('m=1,w=800,h=800')}}">
                                        <img src="{{val|get_pic('m=2,w=100,h=100')}}" height="100" alt="" />
                                    </a>
                                    {%set i=i+1%}
                                    {% endfor %}

                                </div>
                                {% endif %}
                                <!-- /Thumbnails -->

                            </div>
                            <!-- /IMAGE -->

                            <!-- ITEM DESC -->
                            <div class="col-lg-6 col-sm-6">

                                <!-- price -->
                                <div class="shop-item-price text-danger">
                                    {{info.title}}
                                    {#{% if info.price %}
                                    {% if info.price|get_price_format('2') %}<span class="line-through nopadding-left">¥{{info.price|get_price_format('2')}}</span>{%endif%}
                                    ¥<price>{{info.price|get_price_format('1')}}</price>
                                    {% else %}
                                    暂不开放购买
                                    {% endif %}#}
                                </div>
                                <!-- /price -->

                                <!-- FORM -->
                                <form class="clearfix form-inline nomargin ichecks"   data-icheck-info ="{{info.suk}}">

                                    <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>

                                    <!--{{info.suk}}-->
                                    {% if info.suk %}
                                    {% set suk = info.suk|strToJson%}
                                    {% set i = 0 %}
                                    {% for item in suk.type%}
                                    <div class="icheck m-b clearfix shop-sku" >
                                        <div class="item dt pull-left text-justify text-right">
                                            {{item}}:
                                        </div>
                                        <div class="itemnbox">
                                            {% if i == 0 %}
                                            {% for _item in suk.data %}
                                            <!--{{_item.name}}-->

                                            <div class="item">
                                                <input type="radio"  name="size1" value="{{_item.name}}" >
                                                <label >{%if suk.is_pic == 1%}<img class="m-r-xs" height="30" alt="" data-src="{{_item.pic|get_pic('m=1,w=800,h=800')}}" src="{{_item.pic|get_pic('m=2,w=30,h=30')}}">{%endif%}{{_item.name}}</label>
                                            </div>

                                            {% endfor %}

                                            {% elif i==1 %}
                                            {% for _item in suk.data[0].ch %}
                                            <!--{{suk.data[0].name}}-->
                                            <div class="item">
                                                <input type="radio"  name="size2" value="{{_item.name}}" >
                                                <label >{{_item.name}}</label>
                                            </div>
                                            {% endfor %}
                                            {% else %}
                                            {% for _item in suk.data[0].ch[0].ch %}
                                            <!--{{suk.data[0].name}}-->
                                            <div class="item">
                                                <input type="radio"  name="size3" value="{{_item.name}}" >
                                                <label >{{_item.name}}</label>
                                            </div>
                                            {% endfor %}
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% set i = i+1%}
                                    {% endfor %}
                                    <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                    {% endif %}
                                    <input type="hidden" name="product_id" value="{{info.id}}" />
                                    <input type="hidden" id="type" name="type" value="" />
                                    <!-- see assets/js/view/demo.shop.js -->
                                    {#<div  id="out-of-stock" class="{% if info.total_stock != 0%}hide{% endif %}">

                                        <!-- buttons -->
                                        <div class="shop-item-buttons text-center ">
                                            <span class="out-of-stock">已售罄</span><!-- add .clean to remove css characteres -->
                                        </div>
                                        <!-- /buttons -->
                                    </div>#}
                                    {% if controller.user.roleid == 9 %}<!--客户-->
                                    <div id="in-of-stock" >
                                        <div class="btn-group pull-left product-opt-qty">
                                            <input id="qty" name="qty" type="number" class="form-control stepper" value="1" >
                                        </div><!-- /btn-group -->
                                        <span class="btn pull-left noradius ">{{info.unit}}</span>
                                        <button class="btn btn-danger pull-left product-add-cart noradius " {% if controller.user.user_active == 0 %} disabled title="用户没有通过审核，无法操作" {% endif %}> <i class="fa fa-cart-plus "></i> 添加到购物车</button>
                                    </div>
                                    {% endif %}

                                </form>
                                <!-- /FORM -->


                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                {% if info.description %}
                                <!-- short description -->
                                <small class="text-muted">{{info.description}}</small>
                                <div class="divider margin-top-10 margin-bottom-10"><!-- divider --></div>
                                <!-- /short description -->
                                {% endif %}

                            </div>
                            <!-- /ITEM DESC -->

                        </div>
                    </div>
                    {% rkeywords data ="tags",type="0",mod_id=info.model_id,id=info.id%}
                    {%if tags%}
                    <div class="panel-footer panel-footer-transparent">
                        <!-- TAGS -->

                        {%set color = ["btn-primary","btn-success","btn-info","btn-warning","btn-danger"]%}
                        {%for k in tags%}
                        <a href="{{k.url}}" class="btn {{color|random}} btn-xs relative">
                            {{k.keyname}}
                        </a>
                        {%endfor%}
                        <!-- /TAGS -->
                    </div>
                    {%endif%}
                    <div class="panel-footer">
                        <ul class="pager nomargin">
                            {%if previous.id%}
                            <li class="previous"><a class="noborder" href="{{previous.name|get_url(previous.id)}}" title="{{previous.title}}">&larr; 上一个:{{previous.title|truncate(30)}}</a></li>
                            {%endif%}
                            {%if next.id%}
                            <li class="next"><a class="noborder" href="{{next.name|get_url(next.id)}}" title="{{next.title}}">下一个:{{next.title|truncate(30)}} &rarr;</a></li>
                            {%endif%}
                        </ul>
                    </div>
                    <div class="panel-footer nopadding">
                        <ul id="myTab" class="nav nav-tabs " role="tablist" style="margin: -1px">
                            <li role="presentation" class="active"><a href="#description" role="tab" data-toggle="tab">商品介绍</a></li>
                        </ul>
                    </div>
                    <div class="tab-content panel-body padding-15">
                        <!-- DESCRIPTION -->
                        <div role="tabpanel" class="tab-pane fade in active" id="description">
                            <!--页面内容钩子加载-->
                            {{content(pagehook)}}
                            <!--/页面内容钩子加载结束-->
                        </div>
                    </div>
                </div>

            </div>


            <!-- LEFT -->
            <!-- LEFT -->
            <div class="col-lg-2 col-md-2 col-sm-2">
                <!-- INLINE SEARCH -->
                <div class="inline-search clearfix margin-bottom-20">
                    <form action="/search" method="get" class="widget_search" target="_blank">
                        <input type="search" placeholder="请输入关键词..." id="q" name="q" class="serch-input">
                        <button type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
                <!-- /INLINE SEARCH -->
                <!-- CATEGORIES -->
                <div class="panel panel-default side-nav">
                    <div class="panel-heading">
                        <h2 class="panel-title">{{breadcrumb[0].title}}分类</h2>
                    </div>
                    <div class="panel-body" style="padding: 10px 0 0 10px">
                        <ul class="list-group list-group-bordered  uppercase nomargin">
                            <!--{{breadcrumb[1].id}}-->
                            {% column data="clist",tree=breadcrumb[0].id %}
                            {% column data="clist",tree=breadcrumb[0].id %}
                            {% for val in clist %}
                            <!--{%if breadcrumb[1].id == val.id%} active {%endif%}-->
                            <li class="list-group-item {%if breadcrumb[1].id == val.id%}active {%endif%} ">
                                <a  {% if val.children %}class="dropdown-toggle "{%endif%} href="{{val.url}}">{{val.name}}</a>
                                {% if val.children %}
                                <ul >
                                    {% for _val in val.children %}
                                    <li class="{%if breadcrumb[2].id == _val.id%}active {%endif%}"><a href="{{_val.url}}"><span class="size-11 text-muted pull-right">(123)</span> {{_val.name}}</a></li>
                                    {%endfor%}

                                </ul>
                                {%endif%}
                            </li>
                            {%endfor%}

                        </ul>.
                    </div>
                </div>

                <!-- /CATEGORIES -->
                <div class="panel panel-default hotgoods">
                    <div class="panel-heading">
                        <h2 class="panel-title">热卖</h2>
                    </div>
                    {%topic data="hotgoods",limit="9",cid=category.id,type="hot",cache="1000"%}
                    <div class="panel-body padding-10" >
                        <div class="owl-carousel featured nomargin" data-plugin-options='{"singleItem": true, "stopOnHover":false, "autoPlay":false, "autoHeight": false, "navigation": true, "pagination": false}'>
                            {%- for items in hotgoods | slice(3) %}
                            <div><!-- SLIDE 1 -->
                                <ul class="list-unstyled nomargin nopadding text-left">
                                    {%- for item in items %}
                                    {% set pic = item.pics|strToArray%}
                                    <li class="clearfix"><!-- item -->
                                        <div class="thumbnail featured clearfix nomargin" style="height: 150px;overflow: hidden">
                                            <a href="{{item.name|get_url(item.id)}}" target="_blank">
                                                <img style="height: 100%" src="{{pic[0]|get_pic('m=1,w=140,h=140')}}" width="141" height="141" alt="featured item">
                                            </a>
                                        </div>
                                        <div class="size-16 text-left text-danger">
                                            ¥{{item.price|get_price_format('1')}}</div>
                                        <div class="rating rating-5 size-13 width-100 text-left"><!-- rating-0 ... rating-5 --></div>
                                        <a class="block size-12 elipsis" href="{{item.name|get_url(item.id)}}" target="_blank">{{item.title}}</a>


                                    </li><!-- /item -->
                                    {% if not loop.last%}
                                    <div class="divider margin-top-6 margin-bottom-6"><!-- divider --></div>
                                    {%endif%}
                                    {%- endfor %}

                                </ul>
                            </div><!-- /SLIDE 1 -->

                            {%- endfor %}


                        </div>

                    </div>
                </div>

                <!-- BANNER ROTATOR -->
                {{13|show_ad('code')|safe}}
                <!-- /BANNER ROTATOR -->






            </div>

        </div>

    </div>
</section>
<!-- / -->
{% endblock %}

{% block script %}
<script src="/static/assets/plugins/share/js/social-share.min.js"></script>
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="/static/assets/js/view/demo.shop.js"></script>
{% endblock %}
